<template>
	<view>
		<view class="flex topTool">
			<view class="query" @click="opencity">
				{{city}}
			</view>
			<view class="flex">
				<input v-model="distance" placeholder="查看1-50公里内的技师"/>
				<view>KM</view>
			</view>
			<view>
				<view class="btn" @click="loadData">查看</view>
			</view>
		</view>
		
		<map :style="mapStyle" scale="13" :latitude="latitude" :longitude="longitude" :markers="ordList" :circles="circles" @regionchange="regionchange"></map>
		
		<view class="bottomTips">
			<view>认证技师:{{dataCount.all}}人 / 工作中:{{dataCount.work}}人 / 休息中:{{dataCount.rest}}人</view>
		</view>
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	export default {
		data() {
			return {
				latitude: 29.558231,
				longitude: 106.58066,
				distance:5,
				ordList: [],
				mapStyle:'',
				city:'定位中',
				circles: [],
				dataCount:{
					all:0,
					work:0,
					rest:0
				}
			}
		},
		onReady() {
			const sysinfo=uni.getSystemInfoSync();
			this.mapStyle=`width:100%;height:${sysinfo.windowHeight-60}px;`;
		},
		onLoad() {
			that=this;
			uni.setNavigationBarTitle({
				title:`附近技师(${that.distance}KM)`
			});
			this.comm.getLocalPos().then(res=>{
				that.latitude=res.lat,
				that.longitude=res.lng;
				that.getAddress();
			});
			
		},
		methods: {
			regionchange(e){
				if(e.type=='end'){
					this.latitude=e.target.centerLocation.latitude;
					this.longitude=e.target.centerLocation.longitude;
					that.getAddress();
				}
			},
			onDateChange(e){
				this[e.target.dataset.name]=e.detail.value;
			},
			setCircles(){
				this.circles=[{
					latitude: this.latitude,
					longitude: this.longitude,
					color: '#ff0000',
					// fillColor: '#54C3FF3A',
					radius: that.distance * 1000,
					strokeWidth: 1
				}];
			},
			opencity() {
				uni.chooseLocation({
					success: (res) => {
						that.latitude=res.latitude,that.longitude=res.longitude;
						that.getAddress();
					}
				})
			},
			getAddress(){
				this.comm.getAddressForPos(this.latitude,this.longitude).then(address=>{
					if(address){
						that.city=address.district;
						that.setCircles();
					}
				});
			},
			loadData(){
				if(!/\d+/.test(this.distance)){
					uni.showToast({
						title:'先输入公里数',icon:'none'
					});
					return;
				}
				that.getAddress();
				this.comm.http('/api/service/citytech',{lat:this.latitude,lng:this.longitude,distance:this.distance}).then(res=>{
					var data=[];
					that.dataCount={
						all:0,
						work:0,
						rest:0
					};
					for (let item of res.data) {
						that.dataCount.all++;
						item.work_status==1?that.dataCount.work++:that.dataCount.rest++;
						data.push({
							latitude:item.lat,
							longitude:item.lng,
							iconPath:item.avatar,
							width: 32,
							height: 32,
							callout:{
								content: item.realname,
								// content:`${item.work_status==1?'工作中':'休息中'}`,
								fontSize: 12,
								padding: 4,
								display: "ALWAYS",
								color:"#ffffff",
								bgColor:`${item.work_status==1?'#ff007f8a':'#666'}`,
								borderWidth:1,
								borderColor:"#ffffff",
								borderRadius:10
							}
						});
					}
					that.ordList=data;
				});
			}
		}
	}
</script>

<style lang="scss">
	.topTool{
		height: 60px; align-items: center; background-color: #f0f0f0; padding: 0 8px;
	}
	.query{
		border-bottom: 1px solid #999; padding: 8px; background: #fff;
	}
	.btn{
		border-radius: 15px; border: 1px solid #999; padding: 8px 5vw; margin-left: 32px;  background: #fff;
	}
	.bottomTips{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		line-height: 35px;
		background-color: #fff;
		z-index: 99;
		padding: 0 16px;
		text-align: center;
	}
</style>
